<template>
  <div class="debug-container">
    <h1>视频播放调试工具</h1>
    
    <!-- 视频源选择 -->
    <div class="source-selector">
      <h3>选择视频源</h3>
      <div class="source-grid">
        <button 
          v-for="source in videoSources" 
          :key="source.id"
          @click="changeVideo(source.url)"
          :class="{ active: currentSrc === source.url }"
          class="source-btn"
        >
          {{ source.name }}
        </button>
      </div>
      
      <div class="custom-url">
        <input 
          v-model="customUrl" 
          placeholder="输入视频URL"
          class="url-input"
        />
        <button @click="changeVideo(customUrl)" class="load-btn">加载</button>
      </div>
    </div>

    <!-- 调试控制 -->
    <div class="debug-controls">
      <label>
        <input type="checkbox" v-model="showDebug" />
        显示调试信息
      </label>
      <button @click="reloadPlayer" class="reload-btn">重新加载</button>
    </div>

    <!-- 视频播放器 -->
    <div class="player-section">
      <VideoPlayerDebug
        :src="currentSrc"
        :width="800"
        :height="450"
        :debug="showDebug"
        @ready="onPlayerReady"
        @error="onPlayerError"
        @loaded="onVideoLoaded"
        @rtsp-convert="onRTSPConvert"
        ref="debugPlayer"
      />
    </div>

    <!-- 状态信息 -->
    <div class="status-panel">
      <h3>状态信息</h3>
      <div class="status-grid">
        <div class="status-item">
          <label>当前URL:</label>
          <span>{{ currentSrc || '无' }}</span>
        </div>
        <div class="status-item">
          <label>播放器状态:</label>
          <span :class="{ error: hasError }">{{ playerState }}</span>
        </div>
        <div class="status-item">
          <label>视频格式:</label>
          <span>{{ getVideoFormat(currentSrc) }}</span>
        </div>
        <div class="status-item">
          <label>网络状态:</label>
          <span>{{ networkStatus }}</span>
        </div>
      </div>
    </div>

    <!-- 解决方案 -->
    <div v-if="hasError" class="solutions">
      <h3>解决方案</h3>
      <div class="solution-list">
        <div v-for="solution in solutions" :key="solution.id" class="solution">
          <h4>{{ solution.title }}</h4>
          <p>{{ solution.description }}</p>
          <button @click="applySolution(solution.action)" class="apply-btn">
            {{ solution.buttonText }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import VideoPlayerDebug from '@/components/VideoPlayerDebug.vue'

// 状态管理
const currentSrc = ref('')
const customUrl = ref('')
const showDebug = ref(true)
const playerState = ref('等待加载')
const hasError = ref(false)
const networkStatus = ref('未知')
const debugPlayer = ref(null)

// 预设视频源
const videoSources = [
  {
    id: 1,
    name: '测试MP4',
    url: 'https://www.w3schools.com/html/mov_bbb.mp4'
  },
  {
    id: 2,
    name: '测试HLS',
    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'
  },
  {
    id: 3,
    name: '测试RTSP',
    url: 'rtsp://223.113.67.182:554/openUrl/GANukmY'
  },
  {
    id: 4,
    name: '本地MP4',
    url: '/test-video.mp4'
  }
]

// 解决方案
const solutions = [
  {
    id: 1,
    title: '检查网络连接',
    description: '确保网络连接正常，视频URL可访问',
    buttonText: '测试连接',
    action: 'testConnection'
  },
  {
    id: 2,
    title: '使用备用视频',
    description: '切换到已知可用的测试视频',
    buttonText: '使用测试视频',
    action: 'useTestVideo'
  },
  {
    id: 3,
    title: '配置转码服务',
    description: 'RTSP流需要FFmpeg+Nginx转码服务',
    buttonText: '查看配置',
    action: 'showConfig'
  },
  {
    id: 4,
    title: '检查浏览器支持',
    description: '确保浏览器支持HTML5视频播放',
    buttonText: '检查支持',
    action: 'checkBrowser'
  }
]

// 方法
const changeVideo = (url) => {
  if (!url) {
    alert('请输入有效的视频URL')
    return
  }
  
  currentSrc.value = url
  hasError.value = false
  playerState.value = '加载中...'
  console.log('🔄 切换视频源:', url)
}

const reloadPlayer = () => {
  if (debugPlayer.value) {
    debugPlayer.value.reload()
  }
}

const onPlayerReady = (player) => {
  console.log('✅ 播放器就绪:', player)
  playerState.value = '就绪'
}

const onPlayerError = (errorInfo) => {
  console.error('❌ 播放器错误:', errorInfo)
  hasError.value = true
  playerState.value = '错误: ' + errorInfo.message
}

const onVideoLoaded = () => {
  console.log('📹 视频已加载')
  hasError.value = false
  playerState.value = '播放中'
}

const onRTSPConvert = (info) => {
  console.log('🔄 RTSP转换:', info)
}

const getVideoFormat = (url) => {
  if (!url) return '未知'
  if (url.includes('.m3u8')) return 'HLS'
  if (url.includes('.mp4')) return 'MP4'
  if (url.includes('.webm')) return 'WebM'
  if (url.includes('rtsp://')) return 'RTSP'
  return '未知格式'
}

const applySolution = (action) => {
  switch(action) {
    case 'testConnection':
      testNetworkConnection()
      break
    case 'useTestVideo':
      changeVideo('https://www.w3schools.com/html/mov_bbb.mp4')
      break
    case 'showConfig':
      alert('请查看项目根目录的RTSP视频播放说明.md文件')
      break
    case 'checkBrowser':
      checkBrowserSupport()
      break
  }
}

const testNetworkConnection = async () => {
  networkStatus.value = '测试中...'
  try {
    const response = await fetch(currentSrc.value, { method: 'HEAD' })
    networkStatus.value = response.ok ? '连接正常' : '连接失败'
  } catch (error) {
    networkStatus.value = '连接失败: ' + error.message
  }
}

const checkBrowserSupport = () => {
  const video = document.createElement('video')
  const support = {
    mp4: video.canPlayType('video/mp4') !== '',
    webm: video.canPlayType('video/webm') !== '',
    ogg: video.canPlayType('video/ogg') !== '',
    hls: video.canPlayType('application/x-mpegURL') !== ''
  }
  
  alert('浏览器支持:\n' + 
    `MP4: ${support.mp4 ? '✅' : '❌'}\n` +
    `WebM: ${support.webm ? '✅' : '❌'}\n` +
    `OGG: ${support.ogg ? '✅' : '❌'}\n` +
    `HLS: ${support.hls ? '✅' : '❌'}`
  )
}

// 初始化
onMounted(() => {
  console.log('🚀 视频调试工具已启动')
  changeVideo(videoSources[0].url)
})
</script>

<style scoped>
.debug-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1, h3, h4 {
  color: #333;
  margin-bottom: 15px;
}

.source-selector {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 15px;
}

.source-btn {
  padding: 10px 15px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.source-btn:hover {
  background: #f0f0f0;
}

.source-btn.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.custom-url {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.url-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.load-btn {
  padding: 8px 16px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.debug-controls {
  margin-bottom: 20px;
  display: flex;
  gap: 15px;
  align-items: center;
}

.reload-btn {
  padding: 8px 16px;
  background: #ffc107;
  color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.player-section {
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.status-panel {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  background: white;
  border-radius: 4px;
}

.status-item label {
  font-weight: bold;
  color: #555;
}

.status-item span.error {
  color: #dc3545;
}

.solutions {
  background: #fff3cd;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ffeaa7;
}

.solution-list {
  display: grid;
  gap: 15px;
}

.solution {
  background: white;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.solution h4 {
  margin: 0 0 10px 0;
  color: #856404;
}

.solution p {
  margin: 0 0 10px 0;
  color: #666;
}

.apply-btn {
  padding: 6px 12px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

.apply-btn:hover {
  background: #0056b3;
}
</style>